<template>
<section class="page page-theme login-page">
  <header class="page-header">
    <router-link class="btn-close" to="/">
      <i class="el-icon-close"></i>
    </router-link>
  </header>

  <h2 class="current-title">登录您的账户</h2>

  <div class="form-waper">
    <el-form ref="currentForm" :rules="rules" :model="form">
      <el-form-item prop="tel">
        <el-input v-model.trim="form.tel" placeholder="请输入您的手机号">
          <i slot="prefix" class="fa fa-phone-square input-ico"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model.trim="form.password" placeholder="请输入您的登录密码">
          <i slot="prefix" class="fa fa-lock input-ico"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn-block" type="primary" @click="submit">登录</el-button>
      </el-form-item>
      <router-link class="min-link" to="/forgetpw">忘记密码?</router-link>
    </el-form>
  </div>

  <div class="footer-info">
    <div class="banner"></div>
    <div class="btn-waper text-center">
      <router-link class="el-button el-button--default el-button--small" to="/reg/ship">立即注册</router-link>
    </div>
    <div class="copyright text-center">
      <p>Feedon.me (c)2018</p>
    </div>
  </div>

</section>
</template>

<script>
export default {
  name: 'LoginPage',
  data () {
    return {
      form: {
        tel: '',
        password: ''
      },
      rules: {
        tel: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.currentForm.validate(valid => {
        console.log(valid);
      });
    }


  }
}
</script>

<style lang="less">

.footer-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 30px 20px;
  box-sizing: border-box;
  z-index: 0;

  .banner {
    height: 240px;
    background: url(../assets/desc.jpg) no-repeat center;
    background-size: auto 100%;
  }
  
  .btn-waper {
    padding: 20px 0 20px;
  }

  .copyright {
    color: #7d7d7d;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 12px;
  }
}
</style>
